<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <title>Document</title>
    <script src="js/common.js"></script>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/swiper-3.4.0.min.css">
    <style>
        .swiper-container{width: 7.5rem;margin:0 auto;}
        .swiper-slide img{width: 100%;}
        .btn{width: 1.69rem;border-radius: .03rem;transition:all .3s;position: fixed;left:50%;margin-left:-.85rem;z-index: 12;display: none;}
    </style>
</head>
<body>
    <!-- 页面 开始 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/welcome1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/welcome2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/welcome3.jpg" alt=""></div>
        </div>
    </div>
    <!-- 页面 结束 -->

    <!-- 立即体验 开始 -->
    <a href="index.html" class="btn"></a>
    <!-- 立即体验 结束 -->
    
<script src="js/zepto.min.js"></script>
<script src="js/swiper-3.4.0.min.js"></script>
<script>
    //初始化
    $('.swiper-slide img').css({height:window.innerHeight})
    $('.btn').css({height:window.innerHeight/13.34*0.65,bottom:window.innerHeight/13.34*1.33})
    var mySwiper = new Swiper('.swiper-container',{
        onSlideChangeEnd:function(swiper){
            if(swiper.activeIndex==2){
                $('.btn').show();
            }else{
                $('.btn').hide();
            }
        }
    })
    $('.btn').on('tap',function(){
        $(this).css({boxShadow:'0 0 .04rem rgba(159,218,255,.5)'});
    })

</script>
</body>
</html>